<div id="home-page" class="static-content">

    <h3>Build gMail like websites with AjaxStack</h3>

    <h4>So what does it take to develop a gmail app?</h4>
    <p>
        Actually not much, it really just takes one file like this
        <a href="release/ajaxstack-demo-1.0.min.js">ajaxstack-demo-1.0.min.js</a>.
        <br />
        So what is it? It actually holds this entire website. Well more specifically all the
        <acronym title="Hyper Text Markup Language">HTML</acronym>,
        <acronym title="Cascading Style Sheets">CSS</acronym>
        JavaScript including the 3rd party libraries:
    </p>
    <ul>
        <li><a href="http://www.jquery.com">jQuery</a></li>
        <li><a href="http://code.google.com/p/ajaxstack">Ajax Stack</a></li>
    </ul>
    <p>
        that are required to run this website, all in less than the size of a standard image.
    </p>

    <h4>Nice, now tell me why is that cool again?</h4>
    <p>
        Well the main reason is that its lightning quick, both at startup and for runtime performance,
        as this entire website was loaded by the time you first saw this web page. <br />
        Other advatages include:
    </p>
    <ul>
        <li>Deployment and versioning becomes easy as you essentially just need to version one static file</li>
        <li>It scales really well as you don't need to have a server processing every request</li>
    </ul>

    <img src="img/demo-project.png" alt="demo project folder" align="right" />

    <h4>Yeah but isn't writing Ajax Applications hard?</h4>
    <p>
        Well it doesn't have to be, not if you're using rich Ajax framework like
        <a href="http://code.google.com/p/ajaxstack">Ajax Stack</a> :)<br /><br />

        Basically, you keep the same structured layout as you normally would, <br />
        i.e. Your <acronym title="Hyper Text Markup Language">HTML</acronym>  goes in the
        <b class="dir">/html</b> folder,
        your <acronym title="Cascading Style Sheets">CSS</acronym> in the
        <b class="dir">/css</b> folder
        and your JavaScript in the <b class="dir">/js</b> folder.
    </p>

    <p>
        Once you have your website laid out correctly, add a few simple HttpHandlers to your Web.config and your done! <br />
        Now everytime you refresh a web page, the HttpHandlers will automatically Compress and Minify all your
        JavaScript, CSS and HTML pages and combine them all in a single javascript file that is stored
        in your <b class="dir">/release</b> folder.
    </p>

    <p>
        The generated js file is then simply included in a standard web page like this one
        that just needs to start the application after the page is ready.
    </p>

    <h4>Advanced Features</h4>
    <p>
        Apart from being simple enough to use to handle any static website, <br />
        AjaxStack also includes advanced features to handle the most complex of websites:
    </p>
    <ul>
        <li>Powerful event-based MVC Framework built-in</li>
        <li>Intuitive OOP Javascript Framework with <a href="http://www.servicestack.net/mythz_blog/?p=3">Class.js</a></li>
        <li>Deep Linking</li>
        <li>Back button support</li>
        <li>Seamless web service integration with <a href="http://code.google.com/p/servicestack">Service Stack</a></li>
        <li>JavaScript Unit Testing with <a href="http://developer.yahoo.com/yui/yuitest/">YUI Test</a></li>
        <li>Visual Studio.NET intelli-sense support</li>
    </ul>

    <h4>Applications built using AjaxStack</h4>
    <ul>
    	<li>
    		<strong><a href="http://www.freelamusica.com">www.freelamusica.com</a></strong>
    			&nbsp; - Ajax Prototype application talking directly to &nbsp;
    			<a href="http://www.freelamusica.com/FreeLaMusica.Host.Web/Public/Metadata">these ServiceStack JSON webservices</a>.
    			<br />All HTML template rendering happening within the browser (so ASP.NET web server is not required). (Hosted on CentOS / Nginx)

    	</li>
    </ul>
</div>
